﻿<UserControl
    xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"
    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" 
    xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" xmlns:sys="clr-namespace:System;assembly=mscorlib" 
    xmlns:prism="http://www.codeplex.com/prism" 
    xmlns:GuidanceTools="clr-namespace:Microsoft.Practices.Prism.GuidanceTools;assembly=Microsoft.Practices.Prism.GuidanceTools" xmlns:infra="clr-namespace:StateBasedNavigation.Infrastructure" xmlns:vs="clr-namespace:StateBasedNavigation.Views" xmlns:cb="clr-namespace:StateBasedNavigation.Infrastructure.Behaviors" x:Name="userControl" 
    x:Class="StateBasedNavigation.Views.ChatView"
    mc:Ignorable="d"
    d:DesignHeight="354" d:DesignWidth="595" 
    d:DataContext="{d:DesignData /SampleData/ChatViewModelSampleData.xaml}">

    <UserControl.Resources>
        <infra:SizeToBooleanConverter x:Key="SizeToBooleanConverter"/>

        <Style x:Key="ListBoxItemStyle" TargetType="ListBoxItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="HorizontalAlignment" Value="Stretch"/>
        </Style>

        <Style x:Key="ContactsList" TargetType="ListBox">
            <Setter Property="ItemTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
                            <TextBlock Text="{Binding Name}" Margin="0,0,10,0"/>
                            <TextBlock Text="{Binding PersonalMessage}" FontStyle="Italic"/>
                        </StackPanel>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="ItemContainerStyle" Value="{StaticResource ListBoxItemStyle}"/>
        </Style>

        <Style x:Key="AvatarsList" TargetType="ListBox">
            <Setter Property="ItemTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <StackPanel Orientation="Vertical" Margin="10">
                            <Image Margin="0,0,10,0" Width="75" Height="75" Source="{Binding AvatarUri}"/>
                            <TextBlock Text="{Binding Name}"/>
                        </StackPanel>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="ItemsPanel">
                <Setter.Value>
                    <ItemsPanelTemplate>
                        <toolkit:WrapPanel/>
                    </ItemsPanelTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
        </Style>

        <DataTemplate x:Key="MessageNotificationTemplate">
            <Border BorderThickness="2" BorderBrush="#FF4E80C4" Background="#FFECECEF" CornerRadius="3" IsHitTestVisible="False">
                <StackPanel Orientation="Vertical" Width="230">
                    <TextBlock><Run Text="Message from "/><Run Text="{Binding Contact.Name}"/><Run Text=":"/></TextBlock>
                    <TextBlock><Run Text="{Binding Message}" FontStyle="Italic"/></TextBlock>
                </StackPanel>
            </Border>
        </DataTemplate>

    </UserControl.Resources>

    <Grid x:Name="LayoutRoot">

        <i:Interaction.Behaviors>
            <ei:DataStateBehavior Binding="{Binding ShowDetails}" 
                                  Value="True" 
                                  TrueState="ShowDetails" FalseState="ShowContacts"/>
            <ei:DataStateBehavior Binding="{Binding IsChecked, ElementName=ShowAsListButton}" 
                                  Value="True" 
                                  TrueState="ShowAsList" FalseState="ShowAsIcons"/>
            <ei:DataStateBehavior Binding="{Binding ConnectionStatus}" 
                                  Value="Available" 
                                  TrueState="Available" FalseState="Unavailable"/>
            <ei:DataStateBehavior Binding="{Binding SendingMessage}" 
                                  Value="True" 
                                  TrueState="SendingMessage" FalseState="NotSendingMessage"/>
        </i:Interaction.Behaviors>

        <i:Interaction.Triggers>

            <prism:InteractionRequestTrigger SourceObject="{Binding SendMessageRequest}">
                <prism:PopupChildWindowAction>
                    <prism:PopupChildWindowAction.ChildWindow>
                        <vs:SendMessageChildWindow/>
                    </prism:PopupChildWindowAction.ChildWindow>
                </prism:PopupChildWindowAction>
            </prism:InteractionRequestTrigger>

            <prism:InteractionRequestTrigger SourceObject="{Binding ShowReceivedMessageRequest}">
                <cb:ShowNotificationAction TargetName="NotificationPopup" />
            </prism:InteractionRequestTrigger>

        </i:Interaction.Triggers>

        <VisualStateManager.VisualStateGroups>

            <VisualStateGroup x:Name="VisualizationStates">

                <VisualStateGroup.Transitions>

                    <VisualTransition From="ShowAsIcons" To="ShowAsList">
                        <Storyboard SpeedRatio="2">
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="ContainerPane">
                                <EasingDoubleKeyFrame KeyTime="0:0:0" Value="360"/>
                                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="270"/>
                                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="90"/>
                                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
                            </DoubleAnimationUsingKeyFrames>

                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Visibility)" Storyboard.TargetName="Contacts">
                                <DiscreteObjectKeyFrame KeyTime="0:0:0.5" Value="Visible"/>
                            </ObjectAnimationUsingKeyFrames>

                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Visibility)" Storyboard.TargetName="Avatars">
                                <DiscreteObjectKeyFrame KeyTime="0:0:0.5" Value="Collapsed"/>
                            </ObjectAnimationUsingKeyFrames>

                        </Storyboard>
                    </VisualTransition>

                    <VisualTransition From="ShowAsList" To="ShowAsIcons">
                        <Storyboard SpeedRatio="2">
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="ContainerPane">
                                <EasingDoubleKeyFrame KeyTime="0:0:0" Value="360"/>
                                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="270"/>
                                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="90"/>
                                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
                            </DoubleAnimationUsingKeyFrames>

                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Visibility)" Storyboard.TargetName="Contacts">
                                <DiscreteObjectKeyFrame KeyTime="0:0:0.5" Value="Collapsed"/>
                            </ObjectAnimationUsingKeyFrames>

                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Visibility)" Storyboard.TargetName="Avatars">
                                <DiscreteObjectKeyFrame KeyTime="0:0:0.5" Value="Visible"/>
                            </ObjectAnimationUsingKeyFrames>

                        </Storyboard>
                    </VisualTransition>

                </VisualStateGroup.Transitions>

                <VisualState x:Name="ShowAsList">
                    <Storyboard>

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Visibility)" Storyboard.TargetName="Contacts">
                            <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible"/>
                        </ObjectAnimationUsingKeyFrames>

                    </Storyboard>
                </VisualState>

                <VisualState x:Name="ShowAsIcons">
                    <Storyboard>

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Visibility)" Storyboard.TargetName="Avatars">
                            <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible"/>
                        </ObjectAnimationUsingKeyFrames>

                    </Storyboard>
                </VisualState>
            </VisualStateGroup>

            <VisualStateGroup x:Name="DetailStates">

                <VisualStateGroup.Transitions>

                    <VisualTransition From="ShowContacts" To="ShowDetails">
                        <Storyboard SpeedRatio="2">
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="ContainerPane">
                                <EasingDoubleKeyFrame KeyTime="0:0:0" Value="360"/>
                                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="270"/>
                                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="90"/>
                                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
                            </DoubleAnimationUsingKeyFrames>

                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Details">
                                <DiscreteObjectKeyFrame KeyTime="0:0:0.5">
                                    <DiscreteObjectKeyFrame.Value>
                                        <Visibility>Visible</Visibility>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualTransition>

                    <VisualTransition From="ShowDetails" To="ShowContacts">
                        <Storyboard SpeedRatio="2">
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="ContainerPane">
                                <EasingDoubleKeyFrame KeyTime="0:0:0" Value="360"/>
                                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="270"/>
                                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="90"/>
                                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
                            </DoubleAnimationUsingKeyFrames>

                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Details">
                                <DiscreteObjectKeyFrame KeyTime="0:0:0.5">
                                    <DiscreteObjectKeyFrame.Value>
                                        <Visibility>Collapsed</Visibility>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualTransition>

                </VisualStateGroup.Transitions>

                <VisualState x:Name="ShowContacts">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Details">
                            <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Collapsed</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>

                <VisualState x:Name="ShowDetails">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Details">
                            <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Visible</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>

            <VisualStateGroup x:Name="StatusStates">
                <VisualState x:Name="Available"/>

                <VisualState x:Name="Unavailable">
                    <Storyboard>

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Control.IsEnabled)" Storyboard.TargetName="MainPane">
                            <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="False"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="OfflineMask">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Visible</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>

                    </Storyboard>
                </VisualState>
            </VisualStateGroup>

            <VisualStateGroup x:Name="ProgressStates">
                <VisualState x:Name="NotSendingMessage"/>

                <VisualState x:Name="SendingMessage">
                    <Storyboard>

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(BusyIndicator.IsBusy)" Storyboard.TargetName="SendingMessageIndicator">
                            <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                <DiscreteObjectKeyFrame.Value>
                                    <sys:Boolean>True</sys:Boolean>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>

                    </Storyboard>
                </VisualState>
            </VisualStateGroup>

        </VisualStateManager.VisualStateGroups>

        <Border x:Name="ContainerPane" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="White"
                BorderBrush="{StaticResource PrimaryBrush}" BorderThickness="2" Margin="2,2,2,0">

            <Border.Projection>
                <PlaneProjection/>
            </Border.Projection>

            <Grid Margin="5">

                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="10"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>

                <!-- Status -->

                <Grid Grid.Row="0">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>

                    <ComboBox x:Name="comboBox" 
                      SelectedValue="{Binding ConnectionStatus, Mode=TwoWay}"
                      SelectedValuePath="Content"
                      HorizontalAlignment="Stretch" Padding="10,3" Margin="0">
                        <ComboBoxItem>Available</ComboBoxItem>
                        <ComboBoxItem>Unavailable</ComboBoxItem>
                    </ComboBox>

                    <GuidanceTools:InfoTipToggleButton Grid.Column="1">
                        <StackPanel MaxWidth="400">
                            <TextBlock TextWrapping="Wrap">
                                This combo box is bound to the ConnectionStatus property on the view model. 
                                This property can be changed from the combo box but it can also be changed
                                by random disconnections originated in the chat service.
                            </TextBlock>
                            <TextBlock TextWrapping="Wrap">
                                A connecton status of "Unavailable" causes a transition to the 'Unavailable' visual
                                state on the 'StatusStates' visual state group, causing the view to be disabled except
                                for this combo box.
                            </TextBlock>
                        </StackPanel>
                    </GuidanceTools:InfoTipToggleButton>
                </Grid>

                <ContentControl x:Name="MainPane" Grid.Row="2"
                                HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" >
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="10"/>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="10"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>

                        <!-- Buttons -->

                        <Grid x:Name="ButtonsPanel" Grid.Row="0">

                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="10"/>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="10"/>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="Auto"/>
                            </Grid.ColumnDefinitions>

                            <RadioButton x:Name="ShowAsListButton" IsChecked="True"
                                         Grid.Column="0"
                                         Padding="10,3" Content="List">
                            </RadioButton>

                            <GuidanceTools:InfoTipToggleButton Grid.Column="1">
                                <StackPanel MaxWidth="400">
                                    <TextBlock TextWrapping="Wrap">
                                        This is a radio button styled as a toggle button. Checking it 
                                        sets the visualization mode to "list of contacts", as defined 
                                        by the 'ShowAsList' visual state. Transitions to this state
                                        are implemented with a flip visual effect.
                                    </TextBlock>
                                    <TextBlock TextWrapping="Wrap">
                                        This radio button is not backed by a property in the view model:
                                        the visualization mode is an implementation detail of the UI.
                                        Visual state transitions for the visualization mode are triggered
                                        by changes on the controls themselves through triggers.
                                    </TextBlock>
                                    <TextBlock TextWrapping="Wrap">
                                        Each visualization mode defines its own ListBox control. Changing
                                        the style on a single, shared ListBox control is not possible
                                        because the chosen visualization modes require the use of 
                                        different panels, which cannot be changed once a list box has
                                        been shown. These two controls share a collection view, so selections
                                        are shared among them.
                                    </TextBlock>
                                </StackPanel>
                            </GuidanceTools:InfoTipToggleButton>

                            <RadioButton x:Name="ShowAsIconsButton" 
                                         Grid.Column="3"
                                         Padding="10,3" Content="Icons">
                            </RadioButton>

                            <GuidanceTools:InfoTipToggleButton Grid.Column="4">
                                <StackPanel MaxWidth="400">
                                    <TextBlock TextWrapping="Wrap">
                                    This is a radio button styled as a toggle button. Checking it 
                                    sets the visualization mode to "avatars", as defined 
                                    by the 'ShowAsIcons' visual state. Transitions to this state
                                    are implemented with a flip visual effect.
                                    </TextBlock>
                                    <TextBlock TextWrapping="Wrap">
                                    This radio button is not backed by a property in the view model:
                                    the visualization mode is an implementation detail of the UI.
                                    Visual state transitions for the visualization mode are triggered
                                    by changes on the controls themselves through triggers.
                                    </TextBlock>
                                    <TextBlock TextWrapping="Wrap">
                                    Each visualization mode defines its own ListBox control. Changing
                                    the style on a single, shared ListBox control is not possible
                                    because the chosen visualization modes require the use of 
                                    different panels, which cannot be changed once a list box has
                                    been shown. These two controls share a collection view, so selections
                                    are shared among them.
                                    </TextBlock>
                                </StackPanel>
                            </GuidanceTools:InfoTipToggleButton>

                            <Button x:Name="ShowDetailsButton"
                                    Grid.Column="6"
                                    Padding="10,3" Content="Details"
                                    Command="{Binding ShowDetailsCommand}"
                                    HorizontalContentAlignment="Left"
                                    HorizontalAlignment="Stretch" >
                                <Button.CommandParameter>
                                    <sys:Boolean>True</sys:Boolean>
                                </Button.CommandParameter>
                            </Button>

                            <GuidanceTools:InfoTipToggleButton
                                          Grid.Column="7">
                                <StackPanel MaxWidth="400">
                                    <TextBlock TextWrapping="Wrap">
                                        This button uses the ShowDetailsCommand, which is only available
                                        when a contact has been selected. Executing the command sets
                                        one of the 'ShowDetails' and 'ShowContacts' visual states.
                                        Transitions to this state are implemented with a flip visual effect.
                                    </TextBlock>
                                    <TextBlock TextWrapping="Wrap">
                                        Visual state transitions for the detail visualization mode are 
                                        triggered by changes in the view model.
                                    </TextBlock>
                                </StackPanel>
                            </GuidanceTools:InfoTipToggleButton >
                        </Grid>

                        <!-- Contacts view-->

                        <ListBox x:Name="Contacts"
                             ItemsSource="{Binding ContactsView}"
                             Style="{Binding Source={StaticResource ContactsList}}"
                             HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="2" Grid.RowSpan="3" Visibility="Collapsed"/>

                        <!-- Avatars view-->

                        <ListBox x:Name="Avatars"
                             ItemsSource="{Binding ContactsView}"
                             Style="{Binding Source={StaticResource AvatarsList}}"
                             HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="2"  Grid.RowSpan="3" Visibility="Collapsed"
                             AutomationProperties.AutomationId="AvatarsView"/>

                        <!-- Details view -->

                        <Grid x:Name="Details"
                              Background="White" Visibility="Collapsed"
                              HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.RowSpan="5">

                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>

                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="2*"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>

                            <sdk:Label Grid.Row="0" Grid.Column="0">
                                <sdk:Label.Content>
                                    <TextBlock AutomationProperties.AutomationId="DetailsHeading">
                                        <Run Text="Details for "/>
                                        <Run Text="{Binding CurrentContact.Name}"/>
                                    </TextBlock>
                                </sdk:Label.Content>
                            </sdk:Label>

                            <sdk:Label Grid.Row="1" Grid.Column="0" HorizontalContentAlignment="Center" HorizontalAlignment="Stretch" >
                                <TextBlock Text="{Binding CurrentContact.PersonalMessage}" FontStyle="Italic"/>
                            </sdk:Label>

                            <Grid Grid.Row="0" Grid.Column="1" Grid.RowSpan="2">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="Auto"/>
                                </Grid.ColumnDefinitions>

                                <Button x:Name="SendMessageButton" Grid.Column="0" Grid.Row="0" Margin="4" VerticalAlignment="Center"
                                    AutomationProperties.AutomationId="SendMessageButton">
                                    <i:Interaction.Triggers>
                                        <i:EventTrigger EventName="Click">
                                            <ei:CallMethodAction TargetObject="{Binding DataContext, ElementName=userControl}"
                                                                 MethodName="SendMessage"/>
                                        </i:EventTrigger>
                                    </i:Interaction.Triggers>
                                    Send Message
                                </Button>
                                <GuidanceTools:InfoTipToggleButton VerticalAlignment="Center"
                                              Grid.Column="1" Grid.Row="0" Margin="4">
                                    <StackPanel MaxWidth="400">
                                        <TextBlock TextWrapping="Wrap">
                                        This button executes the SendMessage method on the view model,
                                        and is only enabled when no other message is being sent. Executing 
                                        the method causes a child window to be opened to capture the 
                                        message to send. Accepting the message causes the view model
                                        to send the message to the chat service, which in turns
                                        causes an update on the view model that is represented by showing
                                        a progress bar until a confirmation that the message has been sent
                                        is issued by the chat service.
                                        </TextBlock>
                                    </StackPanel>
                                </GuidanceTools:InfoTipToggleButton>

                                <Button Grid.Column="0" Grid.Row="1" Margin="4" Command="{Binding ShowDetailsCommand}" VerticalAlignment="Center">
                                    <Button.CommandParameter>
                                        <sys:Boolean>False</sys:Boolean>
                                    </Button.CommandParameter>
                                    Go Back
                                </Button>
                                <GuidanceTools:InfoTipToggleButton  VerticalAlignment="Center"
                                              Grid.Column="1" Grid.Row="1" Margin="4">
                                    <StackPanel MaxWidth="400">
                                        <TextBlock TextWrapping="Wrap">
                                        This button uses the ShowDetailsCommand, which is only available
                                        when a contact has been selected. Executing the command sets
                                        one of the 'ShowDetails' and 'ShowContacts' visual states.
                                        Transitions to this state are implemented with a flip visual effect.
                                        </TextBlock>
                                        <TextBlock TextWrapping="Wrap">
                                        Visual state transitions for the detail visualization mode are 
                                        triggered by changes in the view model.
                                        </TextBlock>
                                    </StackPanel>
                                </GuidanceTools:InfoTipToggleButton >
                            </Grid>

                            <Image Grid.Row="2" Grid.ColumnSpan="2" Source="{Binding CurrentContact.AvatarUri}"
                                   Width="300" Height="300"
                                   HorizontalAlignment="Center" VerticalAlignment="Center"
                                   AutomationProperties.AutomationId="ContactImage"/>

                        </Grid>
                    </Grid>
                </ContentControl>

                <Border x:Name="OfflineMask" Grid.Row="2" BorderThickness="0" CornerRadius="2"
                        Opacity="0.95" Visibility="Collapsed" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                    <Border.Background>
                        <RadialGradientBrush>
                            <GradientStop Color="#FFA1BED2" Offset="0" />
                            <GradientStop Color="#4A88B1CC" Offset="1" />
                        </RadialGradientBrush>
                    </Border.Background>
                    <Border BorderThickness="4" BorderBrush="{StaticResource PrimaryBrush}" CornerRadius="10"
                            Opacity="1" HorizontalAlignment="Center" VerticalAlignment="Center" MaxWidth="220" Background="White">
                        <Image Source="/StateBasedNavigation;component/Images/disconnect.png" Margin="10" AutomationProperties.AutomationId="DisconnectedImage"/>
                    </Border>
                </Border>

            </Grid>
        </Border>

        <Popup x:Name="NotificationPopup" IsOpen="{Binding Count, Converter={StaticResource SizeToBooleanConverter}, FallbackValue=False}">
            <i:Interaction.Behaviors>
                <cb:RelocatePopupBehavior/>
            </i:Interaction.Behaviors>

            <ItemsControl ItemTemplate="{StaticResource MessageNotificationTemplate}" ItemsSource="{Binding}"/>
        </Popup>

        <toolkit:BusyIndicator x:Name="SendingMessageIndicator" 
                               BorderBrush="#FF4E80C4" Background="#FFECECEF" BorderThickness="2"
                               BusyContent="Sending message...">
        </toolkit:BusyIndicator>

    </Grid>
</UserControl>
